<template>
	<div class="container">
		<a-row>
			<a-col :span="20">
				<p class="cont_title">联系人管理</p>
			</a-col>
			<a-col :span="4">
				<a-button style="margin-top: 10px;">返回消息接收管理</a-button>
			</a-col>
		</a-row>
		<a-divider/>
		<a-row>
			<a-col :span="20"></a-col>
			<a-col :span="4">
				<a-button type="primary">新增消息接收人</a-button>
			</a-col>
		</a-row>
		<a-row class="tips">
			<div>提醒：以下联系人都可设置为消息接收人，物流云不会将这些信息对外披露或向第三方提供。</div>
		</a-row>
		<a-table :columns="columns" :dataSource="data" style="margin-top: 10px;">
			<span slot="operation" slot-scope="text, record">
	      <a href="javascript:;">修改</a>
	      <a-divider type="vertical" />
	      <a href="javascript:;">删除</a>
	    </span>
		</a-table>
	</div>
</template>
<script>
	const columns = [{
		title: '姓名',
		dataIndex: 'name',
		key: 'name',
	}, {
		title: '邮箱',
		dataIndex: 'mail',
		key: 'mail',
	}, {
		title: '手机',
		dataIndex: 'phone',
		key: 'phone',
	}, {
		title: '职位',
		key: 'position',
		dataIndex: 'position',
	}, {
		title: '操作',
		key: 'operation',
		scopedSlots: {
			customRender: 'operation'
		},
	}];

	const data = [{
		key: '1',
		name: 'John Brown',
		mail: 'qweer@26.com',
		phone: '157*******4',
		position: '运营管理员',
	}, {
		key: '2',
		name: 'John Brown',
		mail: 'qweer@26.com',
		phone: '157*******4',
		position: '运营管理员',
	}, {
		key: '3',
		name: 'John Brown',
		mail: 'qweer@26.com',
		phone: '157*******4',
		position: '运营管理员',
	}];
	export default {
		data() {
			return {
				data,
				columns,
			}
		},
		beforeCreate() {
			this.form = this.$form.createForm(this);
		},
		methods: {
			// 认证提交
			handleSubmit(e) {
				e.preventDefault();
				this.form.validateFieldsAndScroll((err, values) => {
					if(!err) {
						console.log('Received values of form: ', values);
					}
				});
			},
			// 检测确认密码
			handleConfirmBlur(e) {
				const value = e.target.value;
				this.confirmDirty = this.confirmDirty || !!value;
			},
			// 检测确认密码
			compareToFirstPassword(rule, value, callback) {
				const form = this.form;
				if(value && value !== form.getFieldValue('password')) {
					callback('您输入的两个密码不一致!');
				} else {
					callback();
				}
			},
			// 检测密码		
			validateToNextPassword(rule, value, callback) {
				const form = this.form;
				if(value && this.confirmDirty) {
					form.validateFields(['confirm'], {
						force: true
					});
				}
				callback();
			},
		}
	}
</script>

<style lang="less" scoped>
	.container {
		width: 100%;
		height: 100%;
		padding: 0 20px 40px 20px;
		background: #fff;
		.tips {
			border: 1px solid #E8E8E8;
			padding: 10px;
			margin-top: 10px;
		}
		.cont_title {
			padding-left: 10px;
			margin: 20px 0 0 10px;
			border-left: 2px solid #36948D;
			font-weight: 700;
			.title_list {
				margin-left: 30px;
			}
		}
	}
</style>